<template>
    <el-dialog v-if="cfg.visible" :class="['x-dialog', {'no-max-height': noMaxHeight}, {'has-header': !needHeader}]" :visible.sync="cfg.visible" :width="width" :top="top" append-to-body :close-on-click-modal="needCloseModal" :close-on-press-escape="needCloseModal" v-on="$listeners" @close="onCancel">
        <!-- title -->
        <div slot="title" class="x-dialog__title l-line-1">
            <img v-if="!cfg.noHeadImg" class="title__icon" :src="require(`@/assets/img/${cfg.headImgUrl ||'icon_title.png'}`)" alt="">
            <span>{{cfg.title || ''}}</span>
            <span class="title__tips">{{cfg.subTitle || ''}}</span>
        </div>

        <!-- body -->
        <section class="x-dialog__body" v-loading="loading" element-loading-text="Loading" element-loading-background="rgba(#fff, .35)" element-loading-spinner="el-icon-loading">
            <slot name="body"></slot>
        </section>

        <!-- footer -->
        <div v-if="!definedFooter && needFooter" slot="footer" class="x-dialog__footer">
            <el-button v-if="needCancel" class="o-btn o-btn--cancel" :loading="loading" plain size="small" @click="onCancel">{{cfg.cancelText || '取消'}}</el-button>

            <el-button class="o-btn o-btn--submit" :loading="loading" type="primary" size="small" @click="onSubmit">{{cfg.confirmText || '确定'}}</el-button>
        </div>

        <!-- defined footer -->
        <div v-if="definedFooter" slot="footer" class="x-dialog__footer">
            <slot name="foot"></slot>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        name: 'the-dialog',
        props: {
            cfg: {
                visible: false,
                title: '',
                subTitle: '',
                noHeadImg: false,
                headImgUrl: 'icon_title.png',
                // headIcon: '',
                confirmText: '确定',
                cancelText: '取消'
            },
            loading: {
                type: Boolean,
                default: false
            },
            top: {
                type: String,
                default: '10vh'
            },
            width: {
                type: String,
                default: '50%'
            },
            noMaxHeight: {
                type: Boolean,
                default: false
            },
            needHeader: {
                type: Boolean,
                default: true
            },
            needFooter: {
                type: Boolean,
                default: true
            }, // 是否展示footer
            definedFooter: {
                type: Boolean,
                default: false
            },
            needCloseModal: {
                type: Boolean,
                default: true
            },
            needCancel: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {}
        },
        methods: {
            onCancel(flag) {
                this.cfg.visible = false;
                this.$emit('closed', flag)
            },
            onSubmit(flag) {
                this.$emit('submited', flag)
            },
        }
    }
</script>